<template>
  <div class="app-container">
    <el-card class="box-card" v-loading="loading">
      <div slot="header" class="clearfix">
        <span>{{ material.title }}</span>
        <div class="header-actions">
          <el-button size="mini" type="primary" @click="handleEdit" v-if="canEdit">编辑</el-button>
          <el-button size="mini" @click="goBack">返回列表</el-button>
        </div>
      </div>
      
      <div class="material-content">
        <div class="material-info">
          <div class="material-meta">
            <el-tag>{{ material.typeName }}</el-tag>
            <el-tag type="success">{{ material.educationLevelName }}</el-tag>
            <el-tag type="info">{{ material.subjectName }}</el-tag>
            <el-tag type="warning" v-if="material.schoolName">{{ material.schoolName }}</el-tag>
            <el-tag type="warning" v-else>所有学校可见</el-tag>
          </div>
          
          <div class="material-author">
            <span>上传者：{{ material.userName }}</span>
            <span>上传时间：{{ formatDate(material.createTime) }}</span>
          </div>
          
          <div class="material-cover" v-if="material.coverUrl">
            <img :src="material.coverUrl" alt="封面">
          </div>
          
          <div class="material-desc">
            <h3>内容描述</h3>
            <div class="content-text" v-html="material.content || '<p>暂无描述</p>'"></div>
          </div>
          
          <div class="material-file" v-if="material.fileUrl && material.type === 1">
            <h3>课件文件</h3>
            <el-button type="primary" @click="downloadFile">
              <i class="el-icon-download"></i> 下载文件
            </el-button>
            <div class="file-preview" v-if="isPDF">
              <iframe :src="material.fileUrl" width="100%" height="600" frameborder="0"></iframe>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getMaterialDetail } from '@/api/material';

export default {
  name: 'MaterialDetail',
  data() {
    return {
      material: {},
      loading: true
    };
  },
  computed: {
    isPDF() {
      return this.material.fileUrl && this.material.fileUrl.toLowerCase().endsWith('.pdf');
    },
    canEdit() {
      return this.$store.getters.userInfo.id === this.material.userId || this.$store.getters.isAdmin;
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      const id = this.$route.params.id;
      if (!id) {
        this.$message.error('参数错误');
        this.goBack();
        return;
      }
      
      this.loading = true;
      getMaterialDetail(id)
        .then(response => {
          this.material = response.data;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
          this.$message.error('获取课件笔记详情失败');
          this.goBack();
        });
    },
    handleEdit() {
      this.$router.push(`/material/edit/${this.material.id}`);
    },
    goBack() {
      this.$router.push('/materials');
    },
    downloadFile() {
      if (!this.material.fileUrl) {
        this.$message.error('文件不存在');
        return;
      }
      
      // 创建一个临时链接来下载文件
      const link = document.createElement('a');
      link.href = this.material.fileUrl;
      link.target = '_blank';
      link.download = `${this.material.title}.${this.getFileExtension(this.material.fileUrl)}`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    getFileExtension(url) {
      return url.split('.').pop();
    },
    formatDate(date) {
      if (!date) return '';
      const d = new Date(date);
      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
    }
  }
};
</script>

<style scoped>
.header-actions {
  float: right;
}
.material-content {
  padding: 20px 0;
}
.material-meta {
  margin-bottom: 20px;
}
.material-meta .el-tag {
  margin-right: 10px;
}
.material-author {
  display: flex;
  justify-content: space-between;
  color: #606266;
  font-size: 14px;
  margin-bottom: 20px;
}
.material-cover {
  margin-bottom: 20px;
  text-align: center;
}
.material-cover img {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
}
.material-desc {
  margin-bottom: 30px;
}
.material-desc h3, .material-file h3 {
  font-size: 18px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}
.content-text {
  white-space: pre-wrap;
  line-height: 1.6;
}
.file-preview {
  margin-top: 20px;
  border: 1px solid #ebeef5;
}
</style> 